<template>
    <div class="sdy-cart">
        <SdyHeader title="啥都有 ~ 详情页" back></SdyHeader>
        详情页面
        <van-image :src="goodsInfo.img1"></van-image>
        <p>{{ goodsInfo.proname }}</p>


        <!-- 我是底部内容 -->
        <Teleport to="#sdy-footer">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-action-bar-icon @click="$router.push({ path: '/cart' })" icon="cart-o" text="购物车" />
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
                <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </Teleport>
    </div>
</template>
  
<script setup lang="ts">
// 拿到商品 id
// 如果没有跳转回到列表页
// 如果有请求当前商品详细信息渲染在页面上
import { onMounted, ref } from 'vue'
import { useRoute, useRouter, type Router, type RouteLocationNormalized } from 'vue-router'
import { Dialog } from 'vant'
import { getGoodsDetailApi } from '@/api/goods'
import type { MyHotItem } from '@/config/interface'

const $route: RouteLocationNormalized = useRoute()
const $router: Router = useRouter()

// 验证是否存在 proid
const testProid = () => {
    const proid = $route.query.proid

    // 判断是否存在
    if (!proid) {
        // 提示用户, 跳转回到列表页
        Dialog({
            title: '提示',
            message: '您要查看的商品不存在, 请重试',
        }).then(() => {
            // 哪来回哪去
            $router.back()
        })
    }

    console.log(proid)
}

// 请求商品详细信息展示
// 准备一个数据, 表示商品详细信息
const goodsInfo = ref<MyHotItem>({} as MyHotItem)
const getGoodsInfo = async () => {
    const res = await getGoodsDetailApi($route.query.proid as string)
    goodsInfo.value = res.data
}

// 加入购物车
const addCart = () => {
    console.log('加入购物车')
}

onMounted(() => {
    testProid()
    getGoodsInfo()
})


</script>
  
<style scoped lang="scss">

</style>
  